<template>
  <div class="hotspot">
    <div class="hotspot_content flex flexc">
      <div class="header">
        <div class="title"><span></span>热点问题</div>
      </div>
      <a-row class="row_header flex align_items">
        <a-col :span="6" class="hotspot_left">
          <div class="left_title">
            <h1 class="fs16 bold">i国网打印工作站热点问题</h1>
          </div>
        </a-col>
        <a-col :span="18" class="hotspot_right" style="border-left: 1px solid #F0F1F4">
          <div class="search_box flex space_between">
            <div class="search">
              <a-input v-model:value="title" placeholder="请输入关键词搜素">
                <template #suffix>
                  <SearchOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
              <a-button @click="getList" type="primary">查询</a-button>
            </div>
            <div class="group_button">
              <a-button type="primary" @click="handerClick({key:'feedback',val:'back'})">反馈问题</a-button>
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row class="flex_1 row2">
        <a-col :span="6" class="hotspot_left flex flexc space_between">
          <a-list class="hotspot_list" size="small" :loading="loading" :split="false" :data-source="sourceList">
            <template #renderItem="{ item,index }">
              <a-list-item :class="['pointer',{'active':index === current}]" @click="handerClick({
                    key:'active',
                    num:index
                  })">
                <p>{{ item.title }}</p>
              </a-list-item>
            </template>
            <template #loadMore v-if="sourceLength > 5 && !isMore">
              <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                <a-button type="link"  @click="onLoadMore">查看更多</a-button>
              </div>
            </template>
             <template v-if="sourceLength > 50 && !isAll && isMore">
              <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                <a-button type="link"  @click="onLoadAll">查看所有问题</a-button>
              </div>
            </template>
          </a-list>
        </a-col>
        <a-col :span="18" class="hotspot_right flex flexc space_between">
          <div class="text_content">
            <h1 class="fs17 bold">{{sourceList.length?sourceList[current].title:"-"}}</h1>
            <p>
              {{sourceList.length?sourceList[current].answer:"-"}}
            </p>
          </div>
          <!-- <div class="text_footer">
            <a-space style="width: 100%" align="center" class="space-align-block">
              <a-button type="primary" ghost shape="round">已解决</a-button>
              <a-button type="primary" ghost shape="round">未解决</a-button>
            </a-space>
          </div> -->
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import api from '@/api/problem'
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
  name: 'Hotspot',
  data() {
    return {
      title: "",
      sourceList: [],
      sourceLength: 0,
      current: 0,
      isMore: false,
      isAll:false,
      loading: false,
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      api.getAllHotspotList({ title: this.title }).then(res => {
        this.sourceList = res.data.slice(0, 5);
        this.sourceLength = res.data.length;
        this.current = 0;
        this.loading = false;
      })
    },
    handerClick(data) {
      if (data.key === 'active') {
        this.current = data.num;
      } else if (data.key = 'feedback') {
       this.$router.push(`/list/add`)
      }
    },
    onLoadMore() {
      this.loading = true;
      api.getAllHotspotList({ title: this.title }).then(res => {
        this.sourceList = res.data.slice(0, 50);
        this.sourceLength = res.data.length;
        this.isMore = true;
        this.loading = false;
      })
    },
    onLoadAll(){
      this.loading = true;
      api.getAllHotspotList({ title: this.title }).then(res => {
        this.sourceList = res.data;
        this.sourceLength = res.data.length;
        this.isAll = true;
        this.loading = false;
      })
    }
  },
  components: {
    SearchOutlined,
  }
}
</script>
<style lang="scss" scoped>
@import "./css/hotspot.scss";
</style>
